<template>
  <div class="equipmentCardBox">
    <div class="card">
      <div class="cardImg">
        <img :src="imgUrl" alt="图片没有加载出来！！" style="width:100%;height: 200px">
      </div>
      <div class="container">
        <div>
          <h2 class="table-label"><b>设备详情</b></h2>
        </div>
        <div class="text">
          <span class="table-label"><i class="el-icon-coin" />设备编号:</span>
          <span class="content-text"> {{ listQuery.equipmentNumber }}</span>
        </div>
        <div class="text">
          <span class="table-label"><i class="el-icon-coin" />设备名称:</span>
          <span class="content-text"> {{ equipmentName }}</span>
        </div>
        <div class="text">
          <span class="table-label"><i class="el-icon-top" />上传频率:</span>
          <span class="content-text"> {{ uploadFrequency }}</span>
        </div>
        <div class="text">
          <span class="table-label"><i class="el-icon-delete-location" />所属省份:</span>
          <span class="content-text"> {{ province }}</span>
        </div>
        <div class="text">
          <span class="table-label"><i class="el-icon-crop" />所属管线:</span>
          <span class="content-text"> {{ pipeline }}</span>
        </div>
        <div class="text">
          <span class="table-label"><i class="el-icon-house" />所属站点:</span>
          <span class="content-text"> {{ site }}</span>
        </div>
        <div class="text">
          <span class="table-label"><i class="el-icon-user" />负责人员:</span>
          <span class="content-text"> {{ principal }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchEquipmentInfo } from '@/api/equipment-card'

export default {
  name: 'EquipmentCard',
  props: {
    equipmentNumber: {
      type: String,
      default: 'bd16265284510910002'
    }
  },
  data() {
    return {
      listQuery: {
        equipmentNumber: this.equipmentNumber
      },
      imgUrl: '',
      equipmentName: '',
      uploadFrequency: '',
      province: '',
      pipeline: '',
      site: '',
      principal: ''
    }
  },
  watch: {
    equipmentNumber() {
      this.listQuery.equipmentNumber = this.equipmentNumber
      this.getEquipmentInfo()
    }
  },
  created() {
    this.getEquipmentInfo()
  },
  methods: {
    getEquipmentInfo() {
      fetchEquipmentInfo(this.listQuery.equipmentNumber).then(response => {
        this.equipmentName = response.data.equipmentName
        this.uploadFrequency = response.data.uploadFrequency
        this.province = response.data.province
        this.pipeline = response.data.pipeline
        this.site = response.data.site
        this.principal = response.data.principal
        this.imgUrl = response.data.imgUrl
        setTimeout(() => {
        }, 1.5 * 1000)
      })
    }
  }
}
</script>

<style scoped>
.card {
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
  box-shadow: 0 8px 16px 0;
  transition: 0.3s;
  width: 100%;
  border-radius: 5px;
}

.card:hover {
  /*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);*/
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 10px 36px;
}
.text {
  font-size: 18px;
  margin-bottom: 18px;
  margin-left: 20px;
}
.content-text {
  color: rgba(23, 221, 39, 1);
}
.table-label {
  color: white;
}
</style>
